<template>
  <div class="app-container customer-div">
    <el-menu :default-active="listQuery.tab" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="all">全部</el-menu-item>
      <el-menu-item index="commonCheck">订单普通审批</el-menu-item>
      <el-menu-item index="editCheck">订单修改审批</el-menu-item>
      <el-menu-item index="intentionCancelCheck">意向订单取消</el-menu-item>
      <el-menu-item index="cancelCheck">正式订单取消</el-menu-item>
    </el-menu>
    <div style="margin-top: 20px">
      <!--搜索-->
      <el-form :inline="true" :model="listQuery" size="mini" label-width="80px">
        <el-form-item label="客户名称：">
          <el-select
            clearable
            v-model="listQuery.customerId"
            filterable
            remote
            value-key="customerId"
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            :loading="loading">
            <el-option
              v-for="item in customerList"
              :key="item.customerId"
              :label="item.customerName"
              :value="item.customerId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单编号：">
          <el-input v-model="listQuery.orderSn" placeholder="请输入订单编号" clearable></el-input>
        </el-form-item>
        <el-form-item label="负责人：">
          <el-select v-model="listQuery.userId" filterable placeholder="请选择" clearable>
            <el-option
              v-for="item in userOptionList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleSearchList()" type="primary">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table-container">
      <el-table v-loading="listLoading" :data="tableData" border style="width: 100%; margin-top: 20px">
        <el-table-column prop="checkSn" label="订单编号" min-width="150" align="center">
          <template v-slot="{row}">
            <el-link @click="toDetail(row)" type="primary">{{ row.orderSn }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="customerName" label="客户名称" min-width="200" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="订单日期" min-width="100" align="center">
        </el-table-column>
        <el-table-column prop="userName" label="负责人" min-width="100" align="center">
        </el-table-column>
        <el-table-column prop="orderGoodsNumber" label="订单数量" min-width="100" align="center">
        </el-table-column>
        <el-table-column prop="orderAmount" label="订单金额" min-width="100" align="center">
        </el-table-column>
        <el-table-column prop="orderCustomerType" label="订单分类" min-width="100" align="center">
        </el-table-column>
        <el-table-column prop="checkType" label="审批类型" min-width="100" align="center">
        </el-table-column>
        <el-table-column prop="orderStateStr" label="合同流转状态" min-width="150" align="center">
        </el-table-column>
        <el-table-column label="操作" min-width="100" align="center" fixed="right">
          <template  slot-scope="{row}">
            <el-button type="text" @click="toDetail(row)">审批</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[10, 15, 20, 50]"
        :total="count">
      </el-pagination>
    </div>


  </div>
</template>
<script>
import { getCheckListAPI,orderCheckAPI, } from '@/api/purchase.js';
import { getOrderUsersList,waitList,getCustomerOption } from '@/api/partner';
import store from '@/store';
import { mapGetters } from 'vuex';
import axios from "axios";
const defaultListQuery = {
  "tab" : "all",  //类型（commonCheck：普通审批，editCheck：修改审批， intentionCancelCheck：意向取消审批，cancelCheck：正式订单取消  ）
  "customerId" : '',
  "orderSn" : "",
  "userId" : '',
  "pageNum" : 1,
  "pageSize" : 10
};

export default {
  name: "workflowCheck",
  data() {
    return {
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      tableData: [],
      count: 0,
      listLoading: false,
      roles: store.getters.roles ? store.getters.roles : [],
      userOptionList:[],
      customerList:[],
      loading:false
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),

  },
  components: {

  },
  created() {
    this.getList();
    this.getUserOptionList()
  },
  filters: {


  },
  methods: {
    //获取客户列表
    remoteMethod(query) {
      if(query && query!= ''){
        this.loading = true;
        getCustomerOption({keywords:query,chargeId:this.userId}).then(response => {
          this.customerList = response;
          this.loading = false;
        }).catch(()=>{
          this.loading = false;
        });
      }
    },
    //获取员工下拉选项
    getUserOptionList(){
      getOrderUsersList().then((res)=>{
        this.userOptionList = res;
      })
    },
    toDetail(item){
      // localStorage.setItem('saleListQuery', JSON.stringify(this.listQuery));
      let routeData = this.$router.resolve({name:item.pageType,query:{id:item.orderId,type:'see'}});
      window.open(routeData.href);
    },

    //切换选择状态
    handleSelect(key, keyPath) {
      this.listQuery = JSON.parse(JSON.stringify(defaultListQuery))
      this.listQuery.tab = key;
      this.handleSearchList();
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },

    handleSearchList() {
      this.listQuery.pageNum = 1;
      this.getList();
    },

    //获取合同明细列表
    getList() {
      this.listLoading = true;
      let listQuery = JSON.parse(JSON.stringify(this.listQuery));
      waitList(listQuery).then(response => {
        this.tableData = response.list;
        this.count = response.count;
        this.listLoading = false;
      }).catch(() => {
        this.listLoading = false;
      });
    },
  },
}
</script>

<style scoped lang="scss">
</style>
